#include('header.html')
<script type="text/javascript">
    changeTab('扫码打分');
    
    $(function () {
        // 点击复制
       $("#has > span").click(function (e) {
           var url = $("#has > img").attr('data-url');
           var input = document.getElementById("input");
           input.value = url;
           input.select();
           document.execCommand("copy");
           $("#has > span > span").fadeIn();
           window.setTimeout(function () {
               $("#has > span > span").fadeOut();
           }, 700);
       });

        // 查看所有被打分项
        $('[data-toggle="popover"]').popover({
            trigger: 'hover',
            html: true
        });
        
        $('input[name=targets]').click(function (e) {
            var stageId = $('#mark_kg').data('stage');
            var ids = [];
            $.each($('input[name=targets]:checked'), function (k, v) {
                ids.push(v.value);
            });
            // 保证至少有一个被选中
            if (ids.length === 0) {
                e.preventDefault();
                return;
            }
            console.log(ids);
            $.post('/mark/flushQr', {stageId: stageId, targets: ids}, function (data) {
                console.log(data);
                if (data.success) {
                    var $img = $("#has > img");
                    $img.attr("data-url", data.data.code).attr("src", data.data.url);
                }
            });
        });
    });

</script>
<style>
    #has > span {
        position: absolute;
        top: 10px;
        right: 30px;
        cursor: pointer;
    }
    #has > span:hover {
        color: green;
    }
</style>
<script type="text/javascript" src="../../static/style/admin/js/mark.js"></script>
<div class="online-xcontent">
    <div class="stage_add hidden">
        <div>
            <div class="thumbnail">
                <a href="javascript:" onclick="close_();" class="pull-right">&times;</a>
                <form>
                    <input name="id" type="hidden" value="">
                    <div id="stage" class="form-group input-group">
                        <label class="input-group-addon bg-color-x">阶段名</label>
                        <input name="name" class="form-control" placeholder="阶段名">
                    </div>
                    <div class="form-group">
                        <div style="margin: 0 0 5px; padding: 8px; border-radius: 5px;" class="bg-color-x">选择参评项</div>
                        #for(Shop shop : shops)
                        <label style="margin-left: 8px;" class="checkbox-inline">
                            <input type="checkbox" value="${shop.id}"> ${shop.name}
                        </label>
                        #end
                    </div>
                    <div class="text-muted text-center"><span>定义打分阶段信息</span></div>
                    <div class="caption text-center">
                        <button type="button" onclick="close_();"
                                class="btn btn-sm btn-danger">取消</button>
                        <button type="submit" class="btn btn-sm btn-info">开启</button>
                        <button type="button" id="change_stage"
                                class="btn btn-sm btn-success hidden">修改</button>
                    </div>
                    <div id="loading" class="hidden" style="position: absolute; bottom: 38px; right: 15px;">
                        <img class="" width="20" src="/static/images/loading.jpg">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 在线打分</h4>
            <div class="clock pull-right">
                <span></span>
            </div>
            <div style="padding: 13px 5px 0; position: relative;" class="pull-right">
                <label style="position: absolute;top: 20px; left: -56px;">打分开关</label>
                <span id="mark_kg" data-stage="${stage.id ?! ''}" data-name="${stage.name ?! ''}"
                      data-ids="${stage.shopIds ?! ''}"
                      class="switch-${(mark.can || mark.stage) ? 'on':'off'}"></span>
            </div>
        </div>
        <div>
            <div id="check_" class="col-lg-12 col-xs-12">
                <!-- 打开二维码显示 -->
                <div id="has" class="thumbnail ${(!mark.can && mark.stage == null) ? 'hidden' : ''}">
                    <div style="position: absolute; max-width: 230px;">
                        <div><b style="color: #1b6d85;">单独指定参与项：</b></div>
                        #for(Shop s : target)
                        <label>
                            <input type="checkbox" name="targets" value="${s.id}"
                                   ${targetIds.isContainsId(s.id)?'checked':''}> ${s.name}
                        </label>
                        #end
                    </div>
                    <span>
                        <span style="display: none;" class="label label-success">复制成功！</span>
                        点我复制链接
                        <input style="position: absolute; opacity: 0;" id="input"/>
                    </span>
                    <img width="450" data-url="${qr.code ?! ''}"
                         src="${mark.can ? qr.url:'/static/images/admin/pause.png'}">
                    <div style="padding-top: 0;" class="caption">
                        <div class="flex-space-between">
                            <div>
                                <p class="label label-info">参与人数：${stage.userSum ?! '10'}</p>
                                #if(mark.can)
                                <p style="cursor: pointer;" data-container="body"
                                   data-toggle="popover" data-placement="top"
                                   data-content="
                                   #for(Shop s : target)
                                   <p>${s.name}</p>
                                   #end
                                   "
                                   class="label label-default">所有参与项</p>
                                #end
                                <br>
                                <p class="label label-success">打分阶段：${stage.name ?! ''}</p>
                            </div>
                            <div>
                                <button class="btn btn-success" id="change_box">修改</button>
                                <a id="download" href="${qr.download ?! ''}" class="btn btn-info">下载</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 打开二维码关闭 -->
                <div id="no_has" class="thumbnail ${(mark.can || mark.stage) ? 'hidden' : ''}">
                    <div class="caption ">
                        <h3 class="text-center">打分已关闭</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
#include('footer.html')
